<style lang="less">
  .item1{
    height: 42px;
    line-height: 40px;
  }
  .row-left{
    text-align: center;
  }
  .title-top{
    margin-bottom:10px;
    color: #1C86EE;
    font-size: 1rem;
    border-bottom: 1px solid orangered;
    font-size: 20px;
    color: coral;
  }
  .navi-title {
    height:30px;
    background-color:#f8f8f9;
    line-height:30px;
    padding-left: 15px;
    color: #5CACEE;
    font-size: 0.7rem;
    font-weight: bold;
  }
  .content1{
    background-color:white;
    height: auto;
    width: 100%;
    float: left;
    // border: 1px solid gray;
  }
  .idCard{
    width: 170px;
    height: 80px;
    background-color: #79e428;
    position: absolute;
    right: 2%;
    top: 13%;
    color: white;
    font-size: 1.5rem;
    line-height: 80px;
    text-align: center;
  }
  .red-name{
    color: red
  }
  .ivu-steps-item {
    display: initial;
    position: relative;
    vertical-align: initial;
  }
  .step-item {
    float: left;
    margin-left: 0px;
  }
</style>
<template>
  <div style="background-color:white;width:100%;height:auto">
    <div>
      <Row class="title-top">
        <Col span="4" style="text-align: left;width:22%">城市低保救助申请登记</Col>
      </Row>
    </div>
    <div style="height:30px;">
      <Steps :current="9" size="small">
        <div @click="nextStep('0')" class="step-item">
          <Step title="家庭信息" content=""></Step>
        </div>
        <div @click="nextStep('1')" class="step-item">
          <Step title="家庭成员" content=""></Step>
        </div>
        <div @click="nextStep('2')" class="step-item">
          <Step title="基础收入" content=""></Step>
        </div>
        <div @click="nextStep('3')" class="step-item">
          <Step title="基础支出" content=""></Step>
        </div>
        <div @click="nextStep('4')" class="step-item">
          <Step title="赡抚扶养" content=""></Step>
        </div>
        <div @click="nextStep('5')" class="step-item">
          <Step title="基础财产" content=""></Step>
        </div>
        <div @click="nextStep('6')" class="step-item">
          <Step title="财产房产" content=""></Step>
        </div>
        <div @click="nextStep('7')" class="step-item">
          <Step title="工作单位" content=""></Step>
        </div>
        <div @click="nextStep('8')" class="step-item">
          <Step title="教育情况" content=""></Step>
        </div>
        <div @click="nextStep('9')" class="step-item">
          <Step title="家庭附件" content=""></Step>
        </div>
        <div @click="nextStep('10')" class="step-item">
          <Step title="提交信息" content=""></Step>
        </div>
      </Steps>
    </div>
    <div class="content1">
      <div style="width:50%;float:left">
        <Table highlight-row ref="currentRowTable" :columns="columns1" :data="data3" @on-current-change="onCurrentChange">
          <template slot-scope="{ row }" slot="name">
              <span v-if="row.necessary == true" style="color:red">{{row.name}}</span>
              <span v-else>{{row.name}}</span>
          </template>
          <template slot-scope="{ row, index, column }" slot="action">
              <Button type="success" size="small" :disabled="order_state == '1' || order_state == '2' || order_state == '3'"  @click="uploadPicture(index, row)" style="margin-right:5px">上传要件</Button>
          </template>
        </Table>
        <Modal v-model="face_mol1" title="图片上传" :closable="false">
          <Upload multiple action="http://10.40.20.11:5000/api/uc/mzsc/uploadService/uploadPic" :before-upload="beforeUpload">
            <Button icon="ios-cloud-upload-outline">上传图片</Button>
            <span style="margin-left: 250px">请上传小于8M的图片</span>
          </Upload>
          <img :src="temp_photo" style="width: 100%"/>
          <div slot="footer">
            <Button type="success" :disabled="imgFlag == false" @click="changeToView()">确定</Button>
            <Button type="error" @click="face_mol1=false">关闭</Button>
          </div>
        </Modal>
        <Modal v-model="face_mol2" title="高拍仪" @on-visible-change="modalChange2" @on-cancel="closeHeight" @on-ok="closeHeight">
          <height-camera :isOpen="face_shows2" @ret-fun="retFun"></height-camera>
        </Modal>
      </div>
      <div style="width:50%;float:left">
        <Table highlight-row ref="currentRowTable" :columns="columns2" :data="data4" @on-current-change="onCurrentChange1">
          <template slot-scope="{ row, index }" slot="action">
            <Button type="error" size="small" :disabled="order_state == '1' || order_state == '2' || order_state == '3'"  @click="deleteFile(index, row)" style="margin-right:5px">删除</Button>
            <Button type="info" size="small"  @click="seeImg(index, row)" style="margin-right:5px">查看</Button>
            <Button type="success" size="small"  @click="downs(index, row)" style="margin-right:5px">下载</Button>
          </template>
        </Table>
      </div>
    </div>
    <div style="width:100%;margin-top:10px;">
        <Button type="info" @click="next()" style="margin-left:45%;margin-top: 20px" :disabled="order_state == '1' || order_state == '2' || order_state == '3'">下一步></Button>
    </div>
  </div>
</template>
<script>
import { createPostNew, userinfo, date2str } from '@/api/eventlist'
import HeightCamera from '_c/height2-camera'
import { uploadPic } from '@/api/common'
export default {
  components: {
    HeightCamera
  },
  data () {
    return {
      query_attachment_url: '',
      family_url: '',
      support_id: '',
      family_idInfo: {},
      next_params: {},
      itemid: this.$route.params.itemid || '',
      attachment_url: '',
      info_url: '',
      add_url: '',
      update_url: '',
      delete_url: '',
      imgFlag: false,
      upPicData: {},
      personinfo: {}, // 办理人员信息
      today: '',
      see: this.$route.params.see || false,
      code: this.$route.params.code,
      fileKey: '',
      resInfo: {},
      fileType: '',
      filePath: '',
      fileTitle: '',
      paramuuid: '',
      // 图片要件预览临时变量
      temp_photo: '',
      // 图片上传弹出框
      face_mol1: false,
      // 高拍仪弹出框
      face_mol2: false,
      face_shows2: false,
      paramsData: {},
      paramsId: '',
      url: '',
      str: this.$route.params.serialNumber,
      idcardNumber: this.$route.params.idcardNumber,
      ss11001Id: this.$route.params.ss11001Id,
      ss11002Id: this.$route.params.ss11002Id,
      columns1: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '要件名称',
          slot: 'name'
        },
        {
          title: '操作',
          slot: 'action'
          // render: (h, params) => {
          //   return h('div', [
          //     h('Button', {
          //       props: {
          //         type: 'success',
          //         size: 'small'
          //       },
          //       style: {
          //         marginRight: '5px',
          //         disabled: this.order_state === '1'
          //       },
          //       on: {
          //         click: () => {
          //           this.imgFlag = false
          //           this.face_mol1 = true
          //           this.temp_param_key = params.row.name
          //           this.upPicData.fileName = params.row.name + this.today
          //           this.upPicData.userid = this.personinfo.id
          //           this.upPicData.order_code = this.$route.params.code

          //           // this.upPicData.fileName = params.row.name + this.datetime2str(new Date())
          //           // this.upPicData.filePath = 'itemorder/' + this.personinfo.id + '/' + this.$route.params.code
          //           // this.formItem.paramIndex = params.index
          //           this.temp_photo = ''
          //           // this.upfile(params.index)
          //         }
          //       }
          //     }, '上传要件')
          //   //   h('Button', {
          //   //     props: {
          //   //       type: 'primary',
          //   //       size: 'small'
          //   //     },
          //   //     on: {
          //   //       click: () => {
          //   //         this.face_mol2 = true
          //   //         this.face_shows2 = true
          //   //         // this.deletePeople(params.index)
          //   //       }
          //   //     }
          //   //   }, '拍摄')
          //   ])
          // }
        }
      ],
      columns2: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '文件名称',
          key: 'title'
        },
        {
          title: '操作',
          slot: 'action'
          // render: (h, params) => {
          //   return h('div', [
          //     h('Button', {
          //       props: {
          //         type: 'error',
          //         size: 'small'
          //       },
          //       style: {
          //         marginRight: '5px'
          //       },
          //       on: {
          //         click: () => {
          //           this.fileKey = params.row.fileKey
          //           this.deleteFile(params.index)
          //         }
          //       }
          //     }, '删除'),
          //     h('Button', {
          //       props: {
          //         type: 'primary',
          //         size: 'small'
          //       },
          //       style: {
          //         marginRight: '5px'
          //       },
          //       on: {
          //         click: () => {
          //           console.log('查看')
          //           this.seeImg(params.row.path)
          //         }
          //       }
          //     }, '查看'),
          //     h('Button', {
          //       props: {
          //         type: 'info',
          //         size: 'small'
          //       },
          //       on: {
          //         click: () => {
          //           this.downs(params.row.path)
          //         }
          //       }
          //     }, '下载')
          //   ])
          // }
        }
      ],
      paramData: {
        ssbe0001: '',
        ssbe0002: '',
        ssbe0003: '',
        ssbe0004: '',
        ssbe0005: '',
        ssbe0006: '',
        ssbe0007: '',
        ssbe0008: '',
        ssbe0009: '',
        ssbe0010: '',
        ssbe0011: '',
        ssbe0012: '',
        ssbe0013: '',
        ssbe0014: '',
        ssbe0015: '',
        ssbe0016: '',
        ssbe0017: '',
        ssbe0018: '',
        ssbe0019: '',
        ssbe0020: ''
      },
      ruleValidate: {
        name: [
          { required: true, message: 'The name cannot be empty', trigger: 'blur' }
        ]
      },
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      dataF1: [],
      modal: false,
      order_state: this.$route.params.order_state
    }
  },
  methods: {
    nextStep (step) {
      if (step === '0') {
        this.$router.push({
          name: 'subsistenceapplication',
          params: this.next_params
        })
      } else if (step === '1') {
        this.$router.push({
          name: 'subsistenceapplication1',
          params: this.next_params
        })
      } else if (step === '2') {
        this.$router.push({
          name: 'subsistenceapplication2',
          params: this.next_params
        })
      } else if (step === '3') {
        this.$router.push({
          name: 'expenditurelist',
          params: this.next_params
        })
      } else if (step === '4') {
        this.$router.push({
          name: 'supportlist',
          params: this.next_params
        })
      } else if (step === '5') {
        this.$router.push({
          name: 'basicproperty',
          params: this.next_params
        })
      } else if (step === '6') {
        this.$router.push({
          name: 'houseproperty',
          params: this.next_params
        })
      } else if (step === '7') {
        this.$router.push({
          name: 'workunit',
          params: this.next_params
        })
      } else if (step === '8') {
        this.$router.push({
          name: 'educationinfo',
          params: this.next_params
        })
      }
    },
    // 上传图片前转base64
    beforeUpload (file) {
      // this.upPicData.fileName = this.upPicData.fileName + '.' + file.type.substring(6)
      let that = this
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        that.upPicData.list = reader.result.substring(index)
        that.upPic(that.upPicData)
      }
      return false
    },
    upPic (obj) {
      uploadPic(obj).then(res => {
        if (res.data.data.status === '1') {
          // console.log(res)
          // let aaa = res.data.data.url.replace('images.tripln.top', '59.197.229.163:64201')
          // console.log(aaa)
          this.filePath = res.data.data.url
          this.fileTitle = res.data.data.img_name
          this.fileType = 'JPG'
          this.resInfo = res
          let imgurl = res.data.data.url
          this.paramuuid = this.uuid()
          // let list = this.documentlist[this.formItem.paramIndex]
          // if (list.img_urls) {
          //  list.img_urls.push(imgurl)
          // } else {
          //  list.img_urls = [imgurl]
          // }
          this.temp_photo = imgurl
          this.imgFlag = true
        } else {
          this.imgFlag = false
          this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
        }
      })
    },
    changeToView () {
      console.log('确定')
      var param1 = {
        'request_map': {
          'path': this.filePath,
          'configId': this.paramsId,
          'fileKey': this.paramuuid,
          'title': this.fileTitle,
          'fileType': this.fileType
        },
        'headers_map': {
          'serialNumber': this.str,
          'idcardNumber': this.idcardNumber
        },
        'url': this.url,
        'code': this.$route.params.code,
        'request_step': '10'
      }
      createPostNew(param1).then(res => {
        console.log(res, '上传附件返回信息')
        if (res.data.data.rescode === '0000') {
          this.getAttachmentedList(this.paramsId)
          this.face_mol1 = false
          // this.data4 = this.paramsData[this.temp_param_key] || []
          // this.data4.push(this.resInfo)
          // console.log(this.data4)
          // this.paramsData[this.temp_param_key] = this.data4
          // console.log(this.paramsData, '9999')
        }
      })
    },
    uploadPicSuccess (res, file) {
      console.log(res)
      if (res.state === 'SUCCESS') {
        this.filePath = res.url
        this.fileTitle = res.title
        if (res.type === '.jpg') {
          this.fileType = 'JPG'
        } else if (res.type === '.png') {
          this.fileType = 'PNG'
        } else if (res.type === 'jpeg') {
          this.fileType = 'JPEG'
        }
        this.resInfo = res
      } else {
        this.$Notice.error({ title: '', desc: res.msg })
      }

      // this.data4 = this.paramsData[this.temp_param_key] || []
      // this.data4.push(this.resInfo)
      // console.log(this.data4)
      // this.paramsData[this.temp_param_key] = this.data4
      // console.log(this.paramsData, '9999')
      // 调上传文件接口
      this.paramuuid = this.uuid()
      console.log('uuid' + this.paramuuid)
    },
    modalChange2 (e) {
      this.openNow = e
    },
    retFun (data) {
      if (data.result) {
        this.face_mol2 = false
        this.filePath = data.result
        this.fileTitle = 'YAOJIAN'
        this.fileType = 'PNG'
        // this.data4 = this.paramsData[this.temp_param_key] || []
        // this.data4.push(this.resInfo)
        // console.log(this.data4)
        // this.paramsData[this.temp_param_key] = this.data4
        // console.log(this.paramsData, '9999')
        // 调上传文件接口
        this.paramuuid = this.uuid()
        this.changeToView()
      } else {
        alert('拍照失败,请重新拍摄')
      }
    },
    onCurrentChange (currentRow, oldCurrentRow) {
      this.$emit('on-current-change', currentRow, oldCurrentRow)
      this.paramsId = currentRow.id
      this.getAttachmentedList(currentRow.id, currentRow.name)
    },
    onCurrentChange1 (currentRow, oldCurrentRow) {
      this.$emit('on-current-change', currentRow, oldCurrentRow)
      // this.fileKey = currentRow.fileKey
    },
    // 查看图片
    seeImg (index, item) {
      window.open(item.path)
    },
    // 下载图片
    downs (img) {
      // // 必须同源才能下载
      var alink = document.createElement('a')
      var event = new MouseEvent('click')
      alink.download = 'pic' // 图片名
      alink.href = img
      alink.dispatchEvent(event)
      this.downloadIamge(img, 'pic')
    },
    // 获取家庭需要上传的附件信息列表
    getAttachmentList () {
      var param1 = {
        'request_map': this.family_idInfo,
        'headers_map': {
          'serialNumber': this.str,
          'idcardNumber': this.idcardNumber
        },
        'url': this.attachment_url
      }
      createPostNew(param1).then(res => {
        this.data3 = res.data.data.data.attachmentConfigs
        console.log(res, '需要附件信息列表')
        // for (var i = 0; i < this.data3.length; i++) {
        //   this.getAttachmentedList(this.data3[i].id)
        // }
      })
    },
    // 获取已传附件信息
    getAttachmentedList (configId, name) {
      this.data4 = []
      var param1 = {
        'request_map': {
          'configId': configId
        },
        'headers_map': {
          'serialNumber': this.str,
          'idcardNumber': this.idcardNumber
        },
        'url': this.query_attachment_url
      }
      createPostNew(param1).then(res => {
        this.paramsData[name] = res.data.data.data.attachmentDatas
        var array = res.data.data.data.attachmentDatas
        for (var i = 0; i < array.length; i++) {
          var index = array[i].title.lastIndexOf('/')
          array[i].title = array[i].title.substring(index + 1, array[i].title.length)
          console.log(array[i].title, '!!!!!!$$$$$')
          this.data4.push(array[i])
        }
      })
    },
    upfile (item1) {
      console.log('上传文件')
      // var obj = this.data3[item1]
    },
    // 删除文件
    deleteFile (index, item1) {
      this.fileKey = item1.fileKey
      var delParam = {
        'request_map': {
          'fileKey': this.fileKey
        },
        'headers_map': {
          'serialNumber': this.str,
          'idcardNumber': this.idcardNumber
        },
        'url': this.delete_url,
        'code': this.$route.params.code,
        'request_step': '10',
        'operation_state': 'delete'
      }
      createPostNew(delParam).then(res => {
        alert(res.data.data.memo)
        if (res.data.data.rescode === '0000') {
          this.getAttachmentedList(this.paramsId)
        }
        // this.getHousePropertyList()
      })
    },
    // 身份证号获取用户信息
    getuserinfo (cardno) {
      userinfo(cardno).then(res => {
        if (res.data.data) {
          this.personinfo = res.data.data
          this.personinfo.type = '身份证'
        } else {
          this.$Notice.error({ title: '查不到人员信息' })
        }
      })
    },
    next () {
      this.$router.push({
        name: 'submitinfo',
        params: this.next_params
      })
    },
    changePage () {
      // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
      this.data3 = this.getHousePropertyList()
    },
    uploadPicture (index, item) {
      this.imgFlag = false
      this.face_mol1 = true
      this.temp_param_key = item.name
      this.upPicData.fileName = item.name + this.today
      this.upPicData.userid = this.personinfo.id
      this.upPicData.order_code = this.$route.params.code

      // this.upPicData.fileName = params.row.name + this.datetime2str(new Date())
      // this.upPicData.filePath = 'itemorder/' + this.personinfo.id + '/' + this.$route.params.code
      // this.formItem.paramIndex = params.index
      this.temp_photo = ''
    },
    uuid () {
      var s = []
      var hexDigits = '0123456789abcdef'
      for (var i = 0; i < 32; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
      }
      s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
      // s[8] = s[13] = s[18] = s[23] = "-"
      var uuid = s.join('')
      return uuid
    },
    closeHeight () {
      console.log('guanbi')
      this.face_shows2 = false
    },
    // 时间转字符串 年月日时分秒
    datetime2str (date) {
      let time1 = date.getFullYear() + ''
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hh = date.getHours()
      let mm = date.getMinutes()
      let ss = date.getSeconds()
      time1 += month < 10 ? '0' + month : month
      time1 += day < 10 ? '0' + day : day
      time1 += hh < 10 ? '0' + hh : hh
      time1 += mm < 10 ? '0' + mm : mm
      time1 += ss < 10 ? '0' + ss : ss
      return time1
    },
    downloadIamge (imgsrc, name) { // 下载图片地址和图片名
      let image = new Image()
      // 解决跨域 Canvas 污染问题
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
        let a = document.createElement('a') // 生成一个a元素
        let event = new MouseEvent('click') // 创建一个单击事件
        a.download = name || 'photo' // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = imgsrc
    }
  },
  mounted () {
    console.log(this.$route.params.order_state, '订单状态')
    console.log(this.$route.params.idcardNumber, '订单状态')
    if (this.itemid === '11210101000000MZJD5212000330000') {
      this.family_idInfo = {
        'ss11001Id': this.$route.params.ss11001Id
      }
      this.url = 'dbsq/addAttachmentDatas'
      this.family_url = 'dbsq/queryPersonInfo'
      this.attachment_url = 'dbsq/queryAttachmentConfigs'
      this.query_attachment_url = 'dbsq/queryAttachmentDatas'
      this.delete_url = 'dbsq/delAttachmentData'
      // this.sq_id = 'dbsq/getSqFamilyDicts'
      this.next_params = {
        serialNumber: this.$route.params.serialNumber,
        idcardNumber: this.$route.params.idcardNumber,
        ss11001Id: this.$route.params.ss11001Id,
        ss11002Id: this.$route.params.ss11002Id,
        code: this.$route.params.code,
        see: this.see,
        itemid: this.itemid,
        order_state: this.order_state
      }
    } else if (this.itemid === '11210101000000MZJD5212000351000') {
      this.family_idInfo = {
        'ss17001Id': this.$route.params.ss17001Id
      }
      this.url = 'dbbg/addAttachmentDatas'
      this.family_url = 'dbbg/queryPersonInfo'
      this.attachment_url = 'dbbg/queryAttachmentConfigs'
      this.query_attachment_url = 'dbbg/queryAttachmentDatas'
      this.delete_url = 'dbbg/delAttachmentData'
      // this.sq_id = 'dbbg/getSqFamilyDicts'
      this.next_params = {
        serialNumber: this.$route.params.serialNumber,
        idcardNumber: this.$route.params.idcardNumber,
        ss17001Id: this.$route.params.ss17001Id,
        ss17002Id: this.$route.params.ss17002Id,
        code: this.$route.params.code,
        see: this.see,
        itemid: this.itemid,
        order_state: this.order_state
      }
    }
    this.today = date2str(new Date()).replace(/-/g, '')
    this.getuserinfo(this.$route.params.idcardNumber)
    // 列表
    this.getAttachmentList()
  }
}
</script>
